<script setup>
import { ref, reactive, onMounted } from "vue";
import { useI18n } from "vue-i18n";
import { useRouter } from "vue-router";
import AppHeader from "@/components/app_header.vue";
import { useConfigStore } from "@/store/modules/config";
import { getDappAssetChangeApi } from "@/api/public";
import { fromWeiToFloat } from "@/utils";

const useConfig = useConfigStore();

const { locale, t } = useI18n();
// const isShow = ref(false);
// const loading = ref(false);
// const finished = ref(false);
// const list = reactive([]);
// const tabs = reactive([
//   t("record.tabs1"),
//   t("record.tabs2"),
//   t("record.tabs3"),
//   t("动态"),
//   t("record.tabs4")
// ]);
const router = useRouter();
const ToBlack = () => {
  router.push("revenue");
};
const formatWithdrawStatusName = val => {
  switch (val) {
    case 1:
      return t("record.withdraw.name1");
    case 2:
      return t("record.withdraw.name2");
    case 3:
      return t("record.withdraw.name3");
    default:
      return t("record.tabs4");
  }
};
/// ======================bigv

const activeTab = ref(0);
const clickTab = v => {
  const name = v.name;
  activeTab.value = name;

  // HOLD_PROFIT = 持币 ,EXTENSION_PROFIT = 推广,NFT_PROFIT = NFT ,WITHDRAW = 提现
  let code = "";

  switch (name) {
    case 0:
      code = "HOLD_PROFIT";
      break;

    case 1:
      code = "EXTENSION_PROFIT";
      break;

    case 2:
      code = "NFT_PROFIT";
      break;

    case 3:
      code = "DYNAMIC_PROFIT";
      break;

    case 4:
      code = "WITHDRAW";
      break;
  }

  loadData(code);
};
const page = ref(0);
const size = 50;
const total = ref(0);

// 持币
const holeProfitList = ref([]);
// 推广
const extensionProfitList = ref([]);
// NFT
const nftProfitList = ref([]);
// 动态
const dynamicProfitList = ref([]);
// 提现
const withdrawList = ref([]);

const loadData = async module_code => {
  // HOLD_PROFIT = 持币 ,EXTENSION_PROFIT = 推广,NFT_PROFIT = NFT ,DYNAMIC_PROFIT = 动态 ,WITHDRAW = 提现
  const params = {
    address: useConfig.account,
    page: page.value,
    size,
    module_code
  };
  const res = await getDappAssetChangeApi(params);

  switch (activeTab.value) {
    case 0:
      holeProfitList.value = res;
      break;

    case 1:
      extensionProfitList.value = res;
      break;

    case 2:
      nftProfitList.value = res;
      break;

    case 3:
      dynamicProfitList.value = res;
      break;

    case 4:
      withdrawList.value = res;
      break;
  }

  console.log(res);
};

onMounted(() => {
  loadData("HOLD_PROFIT");
});
</script>

<template>
  <div class="home div-container">
    <!-- header--start-->
    <div class="div-header">
      <div class="div-left" @click.stop="ToBlack">
        <img src="@/assets/icon-black.png" alt="" />
      </div>
      <span class="title">
        <img src="@/assets/icon-logo.png" width="40" alt="" />
      </span>
      <div class="div-right">...</div>
    </div>
    <!-- header--start-->
    <!-- div-wallet--start-->
    <AppHeader />
    <div class="div-record">
      <div class="div-record-title">{{ $t("record.record") }}</div>

      <van-tabs sticky @click-tab="clickTab">
        <van-tab :title="t('record.tabs1')">
          <div class="div-list">
            <div
              v-for="(v, i) in holeProfitList"
              :key="i"
              class="div-list-content"
            >
              <van-list>
                <van-cell>
                  <span
                    >{{ fromWeiToFloat(v.special) }}
                    <!--                    {{ useConfig.name }}-->
                  </span>
                  <span>{{ $t("pledge.pledge") }}</span>
                </van-cell>
                <van-cell>
                  <span
                    >{{ fromWeiToFloat(v.balance_change) }}
                    {{ useConfig.name }}</span
                  >
                  <span>{{ $t("revenue.income") }}</span>
                </van-cell>
                <van-cell>
                  <span>{{ v.created_at }}</span>
                  <span>{{ $t("revenue.time") }}</span>
                </van-cell>
              </van-list>
            </div>
            <div v-show="!holeProfitList.length" class="div-list-empty">
              <img
                src="./../../assets/icon-revenue-empty.png"
                width="150"
                alt=""
              />
              <p>{{ $t("pledge.tableEmpty") }}</p>
            </div>
          </div>
        </van-tab>

        <van-tab :title="t('record.tabs2')">
          <div class="div-list">
            <div
              v-for="(v, i) in extensionProfitList"
              :key="i"
              class="div-list-content"
            >
              <van-list>
                <van-cell>
                  <span
                    >{{ v.special }}
                    <!--                    {{ useConfig.name }}-->
                  </span>
                  <span>{{ $t("revenue.computingPower") }}</span>
                </van-cell>
                <van-cell>
                  <span
                    >{{ fromWeiToFloat(v.balance_change) }}
                    {{ useConfig.name }}</span
                  >
                  <span>{{ $t("revenue.income") }}</span>
                </van-cell>
                <van-cell>
                  <span>{{ v.created_at }}</span>
                  <span>{{ $t("revenue.time") }}</span>
                </van-cell>
              </van-list>
            </div>
            <div v-show="!extensionProfitList.length" class="div-list-empty">
              <img
                src="./../../assets/icon-revenue-empty.png"
                width="150"
                alt=""
              />
              <p>{{ $t("pledge.tableEmpty") }}</p>
            </div>
          </div>
        </van-tab>

        <van-tab :title="t('record.tabs3')">
          <div class="div-list">
            <div
              v-for="(v, i) in nftProfitList"
              :key="i"
              class="div-list-content"
            >
              <van-list>
                <van-cell>
                  <span
                    >{{ v.special }}
                    <!--                    {{ useConfig.name }}-->
                  </span>
                  <span>{{ $t("revenue.unit") }}</span>
                </van-cell>
                <van-cell>
                  <span
                    >{{ fromWeiToFloat(v.balance_change) }}
                    {{ useConfig.name }}</span
                  >
                  <span>{{ $t("revenue.income") }}</span>
                </van-cell>
                <van-cell>
                  <span>{{ v.created_at }}</span>
                  <span>{{ $t("revenue.time") }}</span>
                </van-cell>
              </van-list>
            </div>
            <div v-show="!nftProfitList.length" class="div-list-empty">
              <img
                src="./../../assets/icon-revenue-empty.png"
                width="150"
                alt=""
              />
              <p>{{ $t("pledge.tableEmpty") }}</p>
            </div>
          </div>
        </van-tab>

        <van-tab :title="t('revenue.dynamics')">
          <div class="div-list">
            <div
              v-for="(v, i) in dynamicProfitList"
              :key="i"
              class="div-list-content"
            >
              <van-list>
                <van-cell>
                  <span
                    >{{ v.special }}
                    <!--                    {{ useConfig.name }}-->
                  </span>
                  <span>{{ $t("revenue.computingPower") }}</span>
                </van-cell>
                <van-cell>
                  <span
                    >{{ fromWeiToFloat(v.balance_change) }}
                    {{ useConfig.name }}</span
                  >
                  <span>{{ $t("revenue.income") }}</span>
                </van-cell>
                <van-cell>
                  <span>{{ v.created_at }}</span>
                  <span>{{ $t("revenue.time") }}</span>
                </van-cell>
              </van-list>
            </div>
            <div v-show="!dynamicProfitList.length" class="div-list-empty">
              <img
                src="./../../assets/icon-revenue-empty.png"
                width="150"
                alt=""
              />
              <p>{{ $t("pledge.tableEmpty") }}</p>
            </div>
          </div>
        </van-tab>

        <van-tab :title="t('record.tabs4')">
          <div class="div-list">
            <div
              v-for="(v, i) in withdrawList"
              :key="i"
              class="div-list-content"
            >
              <van-list>
                <van-cell>
                  <span
                    >{{ fromWeiToFloat(v.special) }}
                    <!--                    {{ useConfig.name }}-->
                  </span>
                  <span>{{ formatWithdrawStatusName(v.asset_id) }}</span>
                </van-cell>
                <van-cell>
                  <span
                    >{{ fromWeiToFloat(v.balance_change) }}
                    {{ useConfig.name }}</span
                  >
                  <span>{{ $t("revenue.received") }}</span>
                </van-cell>
                <van-cell>
                  <span>{{ v.created_at }}</span>
                  <span>{{ $t("revenue.time") }}</span>
                </van-cell>
              </van-list>
            </div>
            <div v-show="!withdrawList.length" class="div-list-empty">
              <img
                src="./../../assets/icon-revenue-empty.png"
                width="150"
                alt=""
              />
              <p>{{ $t("pledge.tableEmpty") }}</p>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<style scoped lang="less">
@import "./../../styles/mixin.less";
p {
  margin: 0px;
}
.home {
  font-size: 14px;
  color: #ffffff;
  padding-bottom: 20px;
}
.div-wallet {
  height: 44px;
  padding: 0 14px;
  display: flex;
  font-size: 14px;
  justify-content: space-between;
  & > div {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .wallet {
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 20px;
    border: 1px solid #9cb3bf;
  }
}
.div-record {
  padding: 20px 14px;
  position: relative;
  &-title {
    font-weight: 500;
    font-size: 23px;
    color: #e5f0f4;
    line-height: 40px;
    text-indent: 14px;
    position: relative;
    &:before {
      display: block;
      content: "";
      width: 5px;
      height: 23px;
      position: absolute;
      left: 0px;
      top: 8px;
      background-color: #ffca63;
      border-radius: 5px;
    }
  }
  :deep(.van-tabs__wrap) {
    margin-top: 10px;
    margin-bottom: 10px;
  }
  :deep(.van-tabs__nav) {
    font-size: 14px;
    color: #606374;
    background-color: #171826;
  }
  :deep(.van-tab--active) {
    font-weight: normal;
    color: #fff;
    background-color: #0066ff;
  }
  :deep(.van-tabs__line) {
    display: none;
  }
  .div-list {
    .div-list-content {
      margin-bottom: 20px;
      padding: 32px 22px 10px;
      border: 1px solid #62737f;
      min-height: 200px;
      background: #27283e;
      border-radius: 20px;
      opacity: 0.99;
    }
    :deep(.van-cell) {
      background: #2e2f4a;
      color: #e5f0f4;
      height: 50px;
      margin-bottom: 18px;
    }
    :deep(.van-cell:after) {
      display: none;
    }
    :deep(.van-cell__value) {
      display: flex;
      justify-content: space-between;
      align-items: center;
      span:nth-child(1) {
        font-weight: 500;
        font-size: 14px;
        color: #ff8f6e;
        line-height: 20px;
      }
      span:nth-child(2) {
        font-size: 12px;
        color: #606374;
        font-weight: 500;
      }
    }
  }
  .div-list-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 200px;
    padding: 10px;
    border: 1px solid #62737f;
    border-radius: 20px;
    p {
      font-size: 16px;
      color: #606374;
    }
  }
}
</style>
